<template>
	<view class="wrap">
		<view class="list-wrap" @click="enterdetail(item)" v-for="(item,index) in dataObj" :key="index" :class="{'waiting':item.sign=='waiting','be_confirmed':item.sign=='be_confirmed','completed':item.sign=='completed','appeal':item.sign=='appealing'}" >
			<view class="left">
				
				<view class="info" style="padding-left:14rpx;color:#fd0004;">
					<view class="top">{{item.amount}}</view>
					
				</view>
			</view>
			<view class="right">
				<view>剩余：{{item.countdown2}}</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	function leftTimer(leftTime){
	 if(leftTime<=0){
	 		 return '00:00:00'
	 }
	 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
	 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
	 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
	 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
	 days = checkTime(days); 
	 hours = checkTime(hours); 
	 minutes = checkTime(minutes); 
	 seconds = checkTime(seconds); 
	return `${hours}:${minutes}:${seconds}`
	
	} 
	function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
	 if(i<10) 
	 { 
	 i = "0" + i; 
	 } 
	 return i; 
	}
	export default {

		data() {
			return {
				data:{},
				timer:'',
				type:'',
				dataObj:[]
			}
		},
		onShow(){
			this.getData()
		},
		onLoad(options) {
			this.data=JSON.parse(options.data)
			this.getData()
		},
		onunload(){
			let that=this
			clearInterval(that.timer)
		},
		methods: {
	
			enterdetail(item){
				
				let data=JSON.stringify(item)
				if(item.is_enter){
					
					uni.navigateTo({
						url:`../shouchudetail/index?data=${data}`
					});
					
					// uni.navigateTo({
					// 	url:`/pages/shouchudetail/index?data=${data}`
					// })
				}
				
			},
			getData(){
				let that=this
				
				that.apipost('/api/groupbuy/sell_list',{
					id:that.data.id,
					
				},true).then(res => {
					if(res.Code==10200){
						let data=res.Data
						that.dataObj=data
						that.dataObj=that.dataObj.map(item=>{
							item.countdown2=leftTimer(item.countdown)
							
							return item
						})
						that.timer=setInterval(function(){
							that.dataObj=that.dataObj.map(item=>{
								item.countdown2=leftTimer(item.countdown)
								item.countdown=item.countdown-1000
								return item
							})
							
						},1000)
						
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
			
			
		}
	}
</script>

<style>
	
	.time{
		color:#bcbcbc;
		margin-top:10rpx;
	}
	
	.list-wrap .dot{
		background:#fff;
		height:22rpx;
		border-radius:50%;
		margin-right:28rpx;
		width:22rpx;
	}
	.list-wrap .left{
		border-right:1rpx dashed #f48325;
		background-size:80rpx 80rpx;
		height:100%;
		display:flex;
		padding-left:40rpx;
		width:190rpx;
		align-items: center;
	}
	.list-wrap .right{
		color:#e95758
	}
	
	.list-wrap{
		margin-top:20rpx;
		height:136rpx;
		display:flex;
		align-items: center;
		justify-content: space-between;
		background:#fff;
		border-radius:10rpx;
		color:#000;
		padding: 0 40rpx 0 18rpx; 
	}
	.waiting{
		background:url(/static/daixiaoshou.png) right 0 no-repeat  #fff;
		background-size:auto 55%;
	}
	.be_confirmed{
		background:url(/static/daiqueren.png) right 0 no-repeat  #fff;
		background-size:auto 55%;
	}
	.appeal{
		background:url(/static/shensuzhong.png) right 0 no-repeat  #fff;
		background-size:auto 55%;
	}
	.completed{
		background:url(/static/yiwancheng.png) right 0 no-repeat  #fff;
		background-size:auto 55%;
	}
	page{
		background:#ededed;
	}
	.wrap{
		font-size:36rpx;
		padding:24rpx;
	}
</style>
